<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>

      <div class="infor-right" v-show="ctnIndex == 0" v-loading="loading">
        <div class="account">我的评论</div>
        <div class="infor">
          <div class="infor-title">全部评论</div>
          <div class="talk-content" v-if="res.listShow">
            <div class="talk-single" v-for="(item, index) in list" :key="index">
              <div class="talk-header">
                <div class="headerCtn">
                  <div
                    class="talk-img"
                    @click="goUp('home', item.sendCommentId)"
                  >
                    <img :src="item.sendCommentHeadImage" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 1">
                    <img src="../assets/imgs/xhv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 2">
                    <img src="../assets/imgs/xlv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 3">
                    <img src="../assets/imgs/green.png" alt="" />
                  </div>
                </div>
                <div class="talk-right">
                  <div class="talk-name">{{ item.sendCommentNickName }}</div>
                  <div class="talk-date">{{ item.createTime }}</div>
                </div>
              </div>
              <div class="favor-content">{{ item.commentContent }}</div>
              <div class="small-content">
                <div class="reply" @click="goUp('artDetail', item.articleId)">
                  <div class="reply-content">
                    {{ item.articleTitle }}
                  </div>
                </div>
                <!-- <span class="reply-span" v-if="show">回复</span>
                <div class="showReply" v-else>
                  <div class="comment">
                    <input
                      type="text"
                      name=""
                      id=""
                      class="replyComment"
                      placeholder="回复该条评论"
                    />
                    <div class="triangle"></div>
                  </div>
                  <button class="submit">发送</button>
                </div> -->
              </div>
            </div>
          </div>
          <div class="talk-content noneList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
    </div>
    <div class="paging" v-if="res.listShow">
      <el-pagination
        layout="prev, pager, next"
        :total="res.count"
        :page-size="3"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <nav-footer ref="child"> </nav-footer>
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";

export default {
  data() {
    return {
      tags: [{ name: "发出的评论" }],
      list: [{}, {}, {}],
      defaultIndex: 0,
      ctnIndex: 0,
      value1: "",
      show: true,
      res: "",
      count: 0,
      loading: true,
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
  },
  created() {
    this.init(1);
  },
  methods: {
    init(page) {
      this.loading = true;
      this.$fetch(
        `/laiwen/personal/frontend/clist?page=${page}&limit=3`,
        {}
      ).then((res) => {
        this.loading = false;
        this.res = res;
        this.list = res.list;
        this.delList(res, "list");
      });
    },

    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
    },

    goUp(path, id) {
      this.navigate(path, id);
    },
    //分页方法
    changePage(size) {
      this.init(size);
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/comment.css"></style>
